<template>
  <div>
    <header :class="{fixation:state.isshow}">
      <RouterLink active-class="active" class="tab-link" to="/film/nowPlaying">
        <span>正在热映</span>
      </RouterLink>
      <RouterLink active-class="active" class="tab-link" to="/film/comingSoon">
        <span>即将上映</span>
      </RouterLink>
    </header>
    <RouterView />
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
const state = reactive({
    isshow:false,
    
})
onMounted(() => {
  document.querySelector('.container').addEventListener('scroll',(e) => {
    let scroll = e.target.scrollTop
    console.log(scroll);
    if(scroll>300){
      state.isshow = true
    }else{
      state.isshow = false
    }
  })
})
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
}
a {
  display: inline-block;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
span {
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 15px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  span{
    border-bottom: 1px solid orange;
    color: orange;
  }
}
.fixation{
  position: fixed;
  top: 0;
}
</style>